<template>
  <section class="view-box">
    <div>
      <div class="btn-box">
        <el-button
          :type="localAudio ? 'warning' : 'primary'"
          @click="setLocalAudio(!localAudio)"
          >{{ localAudio ? "关闭麦克风" : "开启麦克风" }}</el-button
        >
      </div>
      <user-list 
      :model-value="userListData"
      @setRemoteAudio="setRemoteAudio"></user-list>
    </div>
    <footer-log :model-value="logs"></footer-log>
  </section>
</template>
<script lang="ts" setup>
import { onActivated, onDeactivated } from "vue";
import UserList from "@/components/adm/talk/UserList.vue";
import FooterLog from "@/components/adm/talk/FooterLog.vue";
import setupRTC from "@/util/rtc";

const {
  localAudio,
  localVideo,
  setJoinChannel,
  setLocalAudio,
  setLocalVideo,
  logs,
  userListData,
  setRemoteAudio,
  initLocalStream,
  initRemoteStream
} = setupRTC();

userListData.push();

// 激活时加入房间
onActivated(() => setJoinChannel(true).then(res => {
  initLocalStream();
  initRemoteStream();
}));

// 取消激活时离开房间
onDeactivated(() => setJoinChannel(false));
</script>
<style lang="scss" scoped>
.view-box {
  display: flex;
  height: calc(100vh - 40px);
  justify-content: space-between;
  flex-direction: column;
}
.btn-box {
  padding: 10px 0px;
}
</style>